<template>
  <view>
    <view class="cateBox">
      <!-- 左侧列表 -->
      <scroll-view
        class="cate-left"
        scroll-y="true"
        :scroll-top="verticalNavTop"
        scroll-with-animation
      >
        <view
          class="cate-left-list"
          v-for="(item, index) in data"
          :key="index"
          @click="tapselect(index)"
        >
          <!-- activeItem为选中状态 -->
          <view
            class="cate-left-item"
            :class="{ activeItem: currentTab == index }"
          >
            <label></label><text>{{ item.navtitle }}</text>
          </view>
        </view>
      </scroll-view>

      <!-- 右侧列表 -->
      <scroll-view
        class="cate-right"
        scroll-y="true"
        @scroll="mainScroll"
        :scroll-into-view="'cate-' + mainCur"
        scroll-with-animation
      >
        <!-- 小轮播图 -->
        <view class="kimbanner">
          <swiper
            :indicator-dots="true"
            :autoplay="true"
            :interval="3000"
            :duration="1000"
            :circular="true"
          >
            <swiper-item
              class="swiperson"
              v-for="(item, i) in swiperlist"
              :key="i"
            >
              <view class="swiper-item">
                <image :src="item.img" mode="widthFix"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <!-- 小轮播图 -->
        <view v-for="(item, index) in data" :key="index" :id="'cate-' + index">
          <view class="cate-right-title">
            <text>{{ item.navtitle }}</text>
            <image
              src="/static/order/zan.png"
              class="zan"
              mode="widthFix"
            ></image>
          </view>
          <view class="cate-right-list">
            <view
              class="cate-right-item"
              v-for="(child, childindex) in item.shop"
              :key="childindex"
              @click="itemClick(child)"
            >
              <!-- <image :src="child.shopimage" mode=""></image>
              <text>{{child.shoptitle}}</text> -->
              <view class="lala">
                <view class="laleft">
                  <image :src="child.img" class="laimg" mode="widthFix"></image>
                </view>
                <view class="laright">
                  <view class="latit"> {{ child.tit }} </view>
                  <view class="latext"> {{ child.text }} </view>
                  <view class="lamoney">
                    <view class="money"> ￥{{ child.money }} </view>
                    <view class="addbox">
                      <image
                        src="/static/order/sub.png"
                        class="lamoneyimg"
                        @click="subnum(child)"
                        mode="widthFix"
                        v-if="child.num > 0"
                      ></image>
                      <view class="addnum" v-if="child.num > 0">
                        {{ child.num }}
                      </view>
                      <image
                        src="/static/order/add.png"
                        class="lamoneyimg"
                        @click="addnum(child)"
                        mode="widthFix"
                      ></image>
                      <!-- 购物车 -->
                      <view class="shopcar" v-if="child.num > 0">
                        <image
                          src="@/static/index/bagbg.png"
                          class="bagbg"
                          mode="widthFix"
                        />
                        <view class="shopnum">￥{{ total }}</view>
                        <view class="shopbut" @click="topayfor()">
                          去结算
                        </view>
                      </view>
                      <!-- 购物车 -->
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view style="height: 50rpx"></view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      total: 0,
      currentTab: 0,
      mainCur: 0,
      verticalNavTop: 0,
      list: [{}],
      swiperlist: [
        {
          img: "/static/index/swiper1.jpg",
        },
        {
          img: "/static/index/swiper2.jpg",
        },
        {
          img: "/static/index/swiper3.jpg",
        },
      ],
    };
  },
  // computed: {
  //   total() {
  //     return 18.5;
  //   },
  // },
  mounted() {
    this.getHeight();
  },
  methods: {
    topayfor() {
      uni.navigateTo({
        url: "/pages/order/payfor",
      });
    },
    itemClick(item) {
      this.$emit("click", item);
    },
    addnum(item) {
      item.num++;
      this.total += item.money;
    },
    subnum(item) {
      if (item.num > 0) {
        item.num--;
        this.total -= item.money;
      }
    },
    //点击左侧按钮
    tapselect(index) {
      this.currentTab = index;
      this.mainCur = index;
      this.verticalNavTop = (index - 1) * 50;
    },
    //右侧滚动
    mainScroll(e) {
      let scrollTop = e.detail.scrollTop + 10;
      for (let i = 0; i < this.list.length; i++) {
        if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
          this.currentTab = i;
          this.verticalNavTop = (i - 1) * 50;
          return false;
        }
      }
    },
    //获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
    getHeight() {
      var top = 0;
      var bottom = 0;
      var temp = 0;
      for (let i = 0; i < this.data.length; i++) {
        let view = uni.createSelectorQuery().select("#cate-" + i);
        view
          .fields(
            {
              size: true,
            },
            (data) => {
              top = temp;
              bottom = temp + data.height;
              this.list[i] = {
                top: top,
                bottom: bottom,
              };
              temp = bottom;
            }
          )
          .exec();
      }
    },
  },
};
</script>

<style lang="scss">
// 购物车
.shopcar {
  z-index: 9999;
  position: relative;
  width: 94%;
  height: 120rpx;
  background-color: #fff;
  position: fixed;
  bottom: 7%;
  left: 50%;
  transform: translate(-50%, 50%);
  border-radius: 80rpx;
  box-shadow: #999 0rpx 0rpx 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .bagbg {
    width: 20%;
    position: absolute;
    top: -20rpx;
    left: 50rpx;
  }
  .shopnum {
    margin-left: 30%;
  }
  .shopbut {
    background-color: #adb838;
    color: #fff;
    height: 100%;
    line-height: 120rpx;
    border-bottom-right-radius: 80rpx;
    border-top-right-radius: 80rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
}
// 购物车
.cateBox {
  position: absolute;
  top: 170rpx;
  bottom: 0;
  background: #fff;
  width: 100%;
  display: flex;
}

.cate-left {
  width: 200rpx;
  background: #f4f4f4;
  height: 100%;
}

.cate-left-item {
  background: #f4f4f4;
  height: 50px;
  display: flex;
  align-items: center;
}

.cate-left-item.activeItem {
  background: #fff;
}

.cate-left-item label {
  width: 4rpx;
  height: 15px;
  float: left;
  background: #f4f4f4;
}

.cate-left-item.activeItem label {
  background: #0bbbef;
}

.cate-left-item text {
  width: 196rpx;
  font-size: 28rpx;
  display: block;
  text-align: center;
}

/* 右侧*/
.cate-right {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
}

.cate-right-title {
  font-size: 28rpx;
  margin-top: 20rpx;
  line-height: 80rpx;
  position: relative;
  display: flex;
  align-items: center;
}

.cate-right-title text {
  background: #fff;
  padding: 0 10px;
  position: relative;
  color: #999;
}

.zan {
  width: 30rpx;
  height: 20rpx;
}

.cate-right-list {
  height: auto;
  overflow: hidden;
}

.cate-right-item {
  // width: 33.33%;
  // float: left;
  // margin-top: 20rpx;
  width: 100%;
  aspect-ratio: 10;
  margin-bottom: 10rpx;
}

.lala {
  width: 100%;
  display: flex;
  height: 180rpx;
}

.laleft {
  width: 30%;
  .laimg {
    width: 100%;
    height: 100%;
  }
}

.laright {
  width: 70%;
  padding-left: 18rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .latext {
    font-size: 0.8rem;
    color: #a4a5a6;
    max-width: 100%;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .lamoney {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .money {
      font-size: 0.9rem;
      font-weight: bold;
    }
    .addbox {
      display: flex;
      align-items: center;
      .addnum {
        margin-right: 10rpx;
        margin-left: 10rpx;
        font-size: 35rpx;
      }
    }

    .lamoneyimg {
      width: 44rpx;
      height: 20rpx;
    }
  }
}

// .cate-right-item image {
//   width: 160rpx;
//   height: 160rpx;
//   display: block;
//   margin: 0 auto;
// }

// .cate-right-item text {
//   display: block;
//   text-align: center;
//   font-size: 24rpx;
// }

/* 小轮播图 */
.kimbanner {
  height: 300rpx;

  .swiperson {
    border-radius: 16rpx;
  }
}

/* 小轮播图 */
</style>
